<template>
  <el-dialog
    v-model="fullScreendialogVisible"
    title="文档预览"
    fullscreen
    destroy-on-close
    @close="emit('close')"
  >
    <div class="fscontainer">
      <jodit
        :htmlStructure="props.htmlStructure"
        :isReadonly="true"
        :isToolbar="false"
      />
      <!-- <div id="mask"></div> -->
    </div>
    <!-- 没格式，不行 -->
    <!-- <div v-html="htmlStructure"></div> -->
    <!-- <template #footer>
      <el-button @click="emit('close')">关闭</el-button>
    </template> -->
  </el-dialog>
</template>
<script setup>
import jodit from "@/views/fileEdit/jodit.vue";
import { onMounted } from "vue";
const props = defineProps({
  htmlStructure: {
    type: String,
    default: "",
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);
const fullScreendialogVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {},
});
onMounted(() => {
  console.log("全屏预览文档组件，挂载完成");
});
</script>
<style lang="scss">
.fscontainer {
  position: relative;
  width: 100%;
  height: 92vh;
  #jodit_editor .jodit-container .jodit-workplace{
    height: 90vh!important;
  }
}
</style>
